<!--
  湖北11选5订单页
-->
<template>
  <div class="fixed-header fixed-footer">
    <x-header>订单详情
      <a slot="right" @click="invoke('screenshot')"><i class="iconfont icon-share font-xxxl"></i></a>
    </x-header>

    <div class="screenshot-extra">
      <div class="text-center mr-3">
        <img class="qrcode" :src="o.inivitQrcode">
        <div class="">长按识别下载客户端</div>
      </div>
      <div class="flex-grow align-self-center">
        <div class="name mb-2"></div>
        <div class="tips"></div>
      </div>
    </div>

    <pull-refresh v-model="loading" @refresh="refresh" style="overflow: initial">
      <div class="bg-white py-3">
        <div class="flex-middle px-2">
          <img class="img-xl" :src="o.icon">
          <strong class="font-xl" v-text="o.lotteryName"></strong>
          <span class="text-grey ml-2">{{o.lotteryNo}}期</span>
          <img class="img-xl ml-auto" src="../../assets/img/order/win.png" v-if="o.status > 9">
          <img class="img-xl ml-auto" src="../../assets/img/order/lose.png" v-else-if="o.status == 8">
          <img class="img-xl ml-auto" src="../../assets/img/order/wait.png" v-else-if="[4, 5, 7].includes(o.status)">
        </div>
        <div class="text-center">
          <h3 v-text="o.statusText"></h3>
          <i class="text-grey" v-if="o.statusTips">（{{o.statusTips}}）</i>
        </div>
      </div>
      <div class="p-3" v-if="o.results">
        <strong class="mr-4">开奖号码</strong>
        <b class="text-red spacing-sm" v-text="o.results"></b>
      </div>
      <div class="p-3" v-else>
        <strong class="mr-4">预计开奖</strong>
        <i v-text="o.finishTime"></i>
      </div>
      <div class="bg-white p-3">
        <div class="mb-3">
          <i class="text-grey mr-4">方案内容</i>{{o.bets}}注{{o.times}}倍，方案金额{{o.amount}}元
        </div>

        <bet :bet="b" :results="o.results" :key="i" v-for="(b, i) in o.betContent"/>

        <div class="text-right" v-if="o.status > 3 && o.status != 6">
          <router-link :to="'/tickets?id=' + o.id">出票成功，出票明细 ></router-link>
        </div>
      </div>

      <infomation :o="o"/>
    </pull-refresh>

    <footer class="d-flex bg-white p-2" v-if="o.status == 0">
      <a class="btn btn-grey mr-auto" @click="cancel">取消订单</a>
      <a class="btn btn-danger" @click="pay">继续提交</a>
    </footer>
    <footer class="d-flex bg-white p-2" v-else>
      <a class="btn btn-danger mr-auto" @click="recommit">提交本号码</a>
      <a class="btn btn-danger" @click="jump('/hubei11c5')">继续选择本彩种</a>
    </footer>

  </div>
</template>

<script>
import { get, id, set } from '../../utils/stoage'
import Infomation from '../orders/infomation'
import { PullRefresh } from 'vant'
import { mixin } from '../orders/mixins'
import Bet from './bet'

export default {
  components: {PullRefresh, Infomation, Bet},
  mixins: [mixin],
  name: 'hubei11c5-order',
  methods: {
    recommit () {
      var {lotteryType, betContent} = this.o
      var cart = get(lotteryType + '.cart', [])
      var items = betContent.map(b => {
        var item = {
          bold: b.bold,
          bets: b.bets,
          id: id()
        }
        item.rule = b.rule
        item.groups = b.content.split('*').map(g => g.split('|').map(n => parseInt(n)))
        return item
      })
      set(lotteryType + '.cart', cart.concat(items))
      this.$router.replace('/' + lotteryType + '/cart')
    }
  }
}
</script>

